/*
 * Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  height: 100%;
  display: block;
  position: relative;
}

/* Ensure that vertically we don't overflow */
.wrapping-container {
  overflow-y: auto;
  /* Use max-height instead of height to ensure that the
    table does not use more space than necessary. */
  height: 100%;
}

.wrapping-container::-webkit-scrollbar {
  display: none;
}

table {
  border-spacing: 0;
  width: 100%;
  height: 100%;
  /* To make sure that we properly hide overflowing text
    when horizontal space is too narrow. */
  table-layout: fixed;
}

tr {
  outline: none;
}

thead tr {
  height: 27px;
}

tbody tr {
  background-color: var(--override-data-grid-row-background-color, --color-background);
}

tbody tr.selected {
  background-color: var(--color-background-elevation-1);
}

td,
th {
  padding: 1px 4px;
  border-left: 1px solid var(--color-details-hairline);
  color: var(--color-text-primary);
  line-height: var(--table-row-height);
  height: var(--table-row-height);
  user-select: text;
  /* Ensure that text properly cuts off if horizontal space is too narrow */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

th {
  font-weight: normal;
  text-align: left;
  border-bottom: 1px solid var(--color-details-hairline);
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-background-elevation-1);
}

td:focus,
th:focus {
  outline: var(--color-primary) auto 1px;
}

.cell-resize-handle {
  top: 0;
  height: 100%;
  z-index: 3;
  width: 20px;
  cursor: col-resize;
  position: absolute;
}

/* There is no divider before the first cell */
td.firstVisibleColumn,
th.firstVisibleColumn {
  border-left: none;
}

.hidden {
  display: none;
}

.filler-row td {
  /* By making the filler row cells 100% they take up any extra height,
  * leaving the cells with content to be the regular height, and the
  * final filler row to be as high as it needs to be to fill the empty
  * space.
  */
  height: 100%;
  pointer-events: none;
  padding: 0;
}

.filler-row.empty-table td {
  /* If the table is empty and we have no renderable rows, the filler row cell
   * needs to have some form of padding to make it have some height, else it
   * stays at a height of 0px and doesn't fill the table. With this padding set,
   * it will then have some height & expand the row it's in to 100% high as
   * desired. */
  padding: 1px;
}

[aria-sort]:hover {
  cursor: pointer;
}

[aria-sort="descending"]::after {
  content: "";
  width: 0;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.4em solid var(--color-text-secondary);
  position: absolute;
  right: 0.5em;
  top: 0.85em;
}

[aria-sort="ascending"]::after {
  content: "";
  width: 0;
  border-bottom: 0.4em solid var(--color-text-secondary);
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  position: absolute;
  right: 0.5em;
  top: 0.7em;
}
